<template>
	<u-popup v-model="show" :borderRadius="20" width="600rpx" mode="center">
		<view class="pay_class">
			<view class="pay_title">选择支付方式</view>
			<view class="pay">
				<view class="u-flex pay-item">
					<u-radio-group class="radio-group" v-model="payClass">
						<view class="u-flex f-sb" @click="changge(item.value)" v-for="(item, index) in list"
							:key="item.value">
							<view class="u-flex">
								<view :class="['pay_icon', 'iconfont', item.icon]"></view>
								<text>{{ item.name }}</text>
							</view>
							
							<u-radio :name="item.value"></u-radio>
						</view>
						<view class="u-flex f-sb" @click="changge(2)" v-if="isBalance">
							<view class="u-flex">
								<view class="pay_icon iconfont iconfont-e653"></view>
								<text>余额支付（{{ vuex_count.balance || 0 }}）</text>
							</view>
							<u-radio :name="2"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="u-flex pay-bottom">
				<view class="pay-bottom-item" @click="onColse">取消</view>
				<view class="pay-bottom-item" @click="onConfirm">确定</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		balance
	} from '@/mixins/balance.js';
	export default {
		mixins: [balance],
		data() {
			return {
				// payClass 支付方式 1微信 6:分账支付 2 余额 7支付宝 8:百度
				payClass: 1,
				show: false, //组件显示隐藏
				totalPrice: null, // 待支付金额
				list: []
			};
		},
		computed: {
			...mapState(['vuex_count'])
		},
		props: {
			isBalance:{
				type:Boolean,
				default:true
			},// 是否有余额支付方式
		},
		mounted() {
			// #ifdef MP-WEIXIN || H5 
			this.payClass = this.vuex_config.union_pay == 1 ? 6 : 1;
			this.list = [{
				value: this.payClass,
				name: '微信支付',
				icon: 'iconfont-e606'
			}];
			// #endif
			// #ifdef APP-PLUS
			this.payClass = this.vuex_config.union_pay == 1 ? 6 : 1;
			this.list = [{
					value: this.payClass,
					icon: 'iconfont-e606',
					name: '微信支付',
				}
			]
			if(this.vuex_businessObj.alipayappid){
				this.list = this.list.concat([{
					value: 7,
					icon: 'iconfont-e60b',
					name: '支付宝',
				}])
			}
			// #endif
			// #ifdef MP-ALIPAY
			this.payClass = 7;
			this.list = [{
				value: 7,
				name: '支付宝',
				icon: 'iconfont-e60b'
			}];
			// #endif
			// #ifdef MP-BAIDU
			this.payClass = 8;
			this.list = [{
				value: 8,
				name: '百度',
				icon: 'iconfont-e8cb'
			}];
			// #endif

			// #ifdef MP-TOUTIAO
			this.payClass = 9;
			this.list = [{
				value: 9,
				name: '字节',
				icon: 'iconfont-e638'
			}];
			// #endif


		},
		methods: {
			...mapActions(['loadUserCount']), // 这个应该放到组件查询
			open(totalPrice) {
				this.loadUserCount();
				this.totalPrice = totalPrice || 0;
				this.show = true;
			},
			onColse() {
				this.show = false;
			},
			changge(type) {
				if (type == '2') {
					if (this.totalPrice > this.vuex_count.balance) {
						this.show = false;
						uni.showModal({
							title: '余额不足',
							content: '是否立即充值?',
							success: res => {
								if (res.confirm) {
									let amount = this.totalPrice - parseFloat(this.vuex_count.balance || 0);
									this.$loading();
									this.Addrecharge(amount)
										.then(() => {
											this.loadUserCount();
											this.$hide();
										})
										.catch(() => {
											this.$hide();
										});
								}
							}
						});
						return;
					}
				}
				this.payClass = type;
			},
			onConfirm() {
				this.show = false;
				let params = {
					pay_type:this.payClass
				}
				// #ifdef APP-PLUS
				if(this.payClass = 7){
					params.business_appid = this.vuex_businessObj.alipayappid
				}else{
					params.business_appid = this.vuex_businessObj.appid
				}
				// #endif
				this.$emit('callBack', {...params});
				this.totaltotalPrice = null;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.pay_class {
		padding: 40rpx 40rpx 0;
		box-sizing: border-box;
	}

	.pay_title {
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.pay-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		font-size: 32rpx;
	}

	.pay {
		border-bottom: 1rpx solid #f5f5f5;
	}

	.pay-bottom {
		justify-content: space-between;
		// line-height: 80rpx;
		// height: 60rpx;
		line-height: 100rpx;
	}

	.pay-bottom-item {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.pay-bottom-item:nth-of-type(1)::before {
		content: '';
		height: 30rpx;
		width: 2rpx;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background-color: #f5f5f5;
	}

	.f-sb {
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}

	/* #ifndef MP-ALIPAY */
	.radio-group {
		width: 100%;

		.pay_icon {
			margin-right: 20rpx;
			color: #18b566;
			font-size: 40rpx;
		}
	}

	/*  #endif */

	/* #ifdef  MP-ALIPAY */
	::v-deep .u-radio-group {
		width: 100% !important;
	}

	.pay_icon {
		margin-right: 20rpx;
		color: #5199ff;
		font-size: 40rpx;
	}

	/*  #endif */
</style>
